<template>
  <!-- 数据置标 -->
  <div class="fileIntegration">
    <div class="btn-continer">
      <el-button type="primary" class="btn-lanse" @click="zhibiao"
        ><i class="el-icon-price-tag el-icon--left xz"></i>整编</el-button
      >
      <el-button type="primary" class="btn-lvse" @click="submit"
        ><i class="el-icon-check el-icon--left"> 提交</i></el-button
      >
      <div class="btn-right">
        <el-button
          icon="el-icon-search"
          @click="getList"
          type="primary"
        ></el-button>
      </div>
      <el-input
        v-model="searchValue"
        placeholder="按整编检索"
        clear
        class="el-inputClass"
      ></el-input>
    </div>
    <div class="table-continer">
      <el-table
        :data="tableData"
        v-loading="loading"
        @row-click="selectionchange"
        :highlight-current-row="true"
        :header-cell-style="{ background: '#F0F0F6', color: '#2D3548' }"
        style="width: 100%"
      >
        <el-table-column fixed prop="fileName" label="文件名称">
        </el-table-column>
        <el-table-column prop="id" label="编号"> </el-table-column>
        <el-table-column prop="fileSizeUnit" label="文件大小">
        </el-table-column>
        <el-table-column prop="fileType" label="文件类型">
          <template slot-scope="scope">
            <span v-if="scope.row.fileType == 1">图片</span>
            <span v-if="scope.row.fileType == 2">视频</span>
            <span v-if="scope.row.fileType == 3">文档</span>
            <span v-if="scope.row.fileType == 4">音频</span>
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="创建人"> </el-table-column>
        <el-table-column prop="createTime" label="创建时间"> </el-table-column>
        <el-table-column label="整编">
          <template slot-scope="scope">
            <el-tag
              class="eltag"
              v-for="(item, index) in scope.row.fileLabel"
              :key="index + 'tag'"
              ><i :class="'el-icon--left xz'"></i>{{ item }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.fileStatus == 1">待提交</span>
            <span v-if="scope.row.fileStatus == 2">待审核</span>
            <span v-if="scope.row.fileStatus == 3">退回</span>
            <span v-if="scope.row.fileStatus == 4">审核通过</span>
            <!-- <span v-if="scope.row.fileStatus == null">待置标</span> -->
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="checkView(scope.row)" type="text" size="small"
              ><i class="el-icon-view el-icon--left"> 预览</i></el-button
            >
            <el-button @click="download(scope.row)" type="text" size="small"
              ><i class="el-icon-edit el-icon--left"> 下载</i></el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="Pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        :current-page="currentPage"
        :page-sizes="[5, 10, 15]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalSize"
      >
      </el-pagination>
    </div>
    <checkimg
      :imgList="imgList"
      :showViewer="showViewer"
      @closeImg="closeImg"
    />
    <openPdf ref="Pdf" />
    <openMusci
      :showPlayer="showPlayer"
      :videoPlay="videoPlay"
      @musicClose="musicClose"
    />
    <el-dialog
      title="视频"
      :visible.sync="playVideo"
      width="40%"
      @close="closeMp4"
    >
      <div class="content">
        <openMp4 :video="video" :playVideo="playVideo" />
      </div>
    </el-dialog>
    <!-- 置标弹窗 -->
    <el-dialog title="整编" :visible.sync="dialogFormVisible">
      <div class="markup">
        <el-table
          :data="rankThree"
          border
          max-height="300px"
          :highlight-current-row="true"
          :header-cell-style="{ background: '#F0F0F6', color: '#2D3548' }"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          row-key="id"
          :key="key"
          style="width: 100%"
          @row-click="selectionClick"
          lazy
          :load="getChildrens"
          ref="multipleTable"
        >
          <el-table-column fixed label="名称">
            <template slot-scope="scope">
              <span style="height: 16px; display: inline-block"
                ><img
                  src="../assets/bao.png"
                  alt=""
                  style="margin-top: 3px; display: block"
              /></span>
              {{ scope.row.name }}
            </template>
          </el-table-column>
          <!-- <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              ><i class="el-icon-edit el-icon--left"> 编辑</i></el-button
            >
            <el-button type="text" size="small"
              ><i class="el-icon-view el-icon--left"> 预览</i></el-button
            >
          </template>
        </el-table-column> -->
        </el-table>
        <div class="Pagination">
          <el-pagination
            @size-change="handleSizeChanges"
            @current-change="handleCurrentChanges"
            background
            :current-page="pageNums"
            :page-sizes="[10, 20, 30]"
            :page-size="pageSizes"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totals"
          >
          </el-pagination>
        </div>
        <!-- <p v-if="checkTag.length > 0">已添加的整编({{ checkTag.length }}/1)</p>
        <div class="tag" v-if="checkTag.length > 0">
          <el-tag
            v-for="(item, index) in checkTag"
            @close="handleClose(item.text)"
            :key="index"
            closable
            :class="item.color"
          >
            <img class="icon" :src="item.icon" alt="" />
            <span>{{ item.text }}</span>
          </el-tag>
        </div>
        <p>可添加的整编(0/1)</p> -->
        <!-- <div class="classify flex-center-start">
          <div class="label">一级分类:</div>
          <div class="tab-list flex-wrap">
            <span
              :class="{ chosed: choseValue1 === item.id }"
              v-for="(item, index) in rankOne"
              :key="index"
              @click="choseRank('1', item.id)"
              >{{ item.text }}</span
            >
          </div>
        </div>
        <div class="classify classify2 flex-center-start">
          <div class="label">二级分类:</div>
          <div class="tab-list tab-list2 flex-wrap">
            <span
              :class="{ chosed: choseValue2 === item.id }"
              v-for="(item, index) in rankTwo"
              :key="index"
              @click="choseRank('2', item.id)"
              >{{ item.text }}</span
            >
          </div>
        </div> -->
        <!-- <div class="classify classify3 flex-center-start">
          <div class="label">整编名称:</div>
          <div class="tab-detail">
            <el-radio-group v-model="checkList">
              <el-radio
                :label="item"
                v-for="(item, index) in rankThree"
                :key="index"
                >{{ item.text }}</el-radio
              >
            </el-radio-group>
          </div>
        </div> -->
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="zhibiaosumit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import checkimg from "../components/checkImg.vue";
import openPdf from "../components/openPdf.vue";
import openMp4 from "../components/openMp4.vue";
import openMusci from "../components/openMusci.vue";
export default {
  name: "fileIntegration",
  components: { checkimg, openPdf, openMp4, openMusci },
  data() {
    return {
      currentPage: 1,
      searchValue: "",
      dialogFormVisible: false,
      choseValue1: "",
      choseValue2: "",
      checkList: "",
      checkTag: [],
      rankOne: [],
      rankTwo: [],
      rankThree: [],
      tableData: [],
      loading: false,
      totalSize: 0,
      pageSize: 10,
      pageNum: 1,
      selectId: {},
      loading: false,
      firstSort: "",
      secondSort: "",
      pageSizes: 20,
      totals: 0,
      key: "",
      pageNums: 1,
      showViewer: false,
      fileList: [],
      fileType: null, //文件类型
      imgList: [],
      showPlayer: false,
      playVideo: false,
      videoPlay: {
        title: "名称",
        artist: "音频",
        src: "",
        pic: "https://moeplayer.b0.upaiyun.com/aplayer/secretbase.jpg",
      },
      tableAllData: [],
      video: {
        // 视频播放源
        url: "",
        // 视频海报
        // cover: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png',
        muted: false, // 是否静音播放
        loop: false, // 视频是否循环播放
        preload: "auto", // 视频预加载
        poster: "", // 原生视频默认海报暂不设置
        volume: 1, // 默认音量
        autoplay: false, // 视频自动播放
      },
      fileList: [
        {
          id: 1,
          fileName: "测试PDF",
          fileUrl: "http://192.168.3.189/aaa.pdf",
        },
      ],
      url: "http://192.168.3.189/aaa.pdf", //文件地址
    };
  },
  // watch: {
  //   checkList(newVal, oldVal) {
  //     // 选择标签时,重新组成新的数组展示；
  //     if (newVal) {
  //       this.checkTag = [
  //         {
  //           text: newVal.text,
  //           color: `color0`,
  //           icon: require(`@/assets/icon/zhibiao01.png`),
  //           id: newVal.id,
  //         },
  //       ];
  //     }
  //   },
  // },
  mounted() {
    this.getList();
  },
  methods: {
    getChildrens(tree, treeNode, resolve) {
      let obj = {
        parentId: tree.id,
        pageNum: this.pageNums,
        pageSize: this.pageSizes,
      };
      this.$api.TwoselectList(obj).then((res) => {
        let data;
        if (Array.isArray([res.data])) {
          if (res.data.length == 0) {
            tree.hasChildren = false;
            this.$set(this.rankThree, tree.id.toString() + "asd", "");
            return;
          }
        }
        if (res.data && res.data.list.length > 0) {
          data = res.data.list.map((item, index) => {
            return {
              ...item,
              hasChildren: true,
              children: [],
            };
          });
          this.tableAllData = this.tableAllData.concat(data); // 保存表格数据
          resolve(data);
        } else {
          tree.hasChildren = false;
          this.$set(this.rankThree, tree.id.toString() + "asd", "");
        }
      });
    },
    selectionClick(row) {
      this.checkTag = [];
      this.checkTag.push({
        id: row.id,
      });
    },
    zhibiao() {
      if (!this.selectId.id) {
        this.$message({
          showClose: true,
          message: "请选择一条数据进行置标",
          type: "warning",
        });
        return;
      }
      this.firstSort = "";
      this.secondSort = "";
      this.choseValue1 = "";
      this.choseValue2 = "";
      this.checkList = "";
      this.rankOne = [];
      this.rankTwo = [];
      this.rankThree = [];
      this.checkTag = [];
      this.dialogFormVisible = true;
      this.pageNums = 1;
      this.getTagList();
    },
    zhibiaosumit() {
      console.log(this.checkTag);
      if (this.checkTag.length == 0) {
        this.$message({
          showClose: true,
          message: "请选择整编库",
          type: "warning",
        });
        return;
      }
      // let lable = "";
      // this.checkTag.forEach((res, index) => {
      //   if (index == this.checkTag.length - 1) {
      //     lable += res.id;
      //   } else {
      //     lable += res.id + "-";
      //   }
      // });
      let obj = {
        id: this.selectId.id,
        lables: this.checkTag[0].id,
      };
      this.$api
        .TsetFileLable(obj)
        .then((res) => {
          if (res.code == 200) {
            this.$message.closeAll();
            this.$message({
              showClose: true,
              message: res.msg,
              type: "success",
            });
            this.dialogFormVisible = false;
            this.getList();
          }
        })
        .catch((res) => {
          this.$message({
            showClose: true,
            message: res.msg,
            type: "error",
          });
        });
    },
    submit() {
      // let arr = [];
      // this.selectId.forEach((res) => {
      //   arr.push({
      //     id: res.id,
      //     lables: res.fileLabel,
      //     user: window.sessionStorage["userName"],
      //   });
      // });
      if (!this.selectId.id) {
        this.$message({
          showClose: true,
          message: "请选择一条数据进行提交",
          type: "warning",
        });
        return;
      }
      let obj = {
        id: this.selectId.id,
      };
      this.$api
        .TlabelSubmit(obj)
        .then((res) => {
          if (res.code == 200) {
            this.$message.closeAll();
            this.$message({
              showClose: true,
              message: res.msg,
              type: "success",
            });
            this.currentPage = 1;
            this.getList();
          }
        })
        .catch((res) => {
          this.$message({
            showClose: true,
            message: res.msg,
            type: "error",
          });
        });
    },
    selectionchange(row) {
      this.selectId = row;
      console.log(this.selectId);
    },
    getList() {
      this.loading = true;
      let obj = {
        lables: this.searchValue,
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        
      };
      this.$api
        .TfileLableList(obj)
        .then((res) => {
          // console.log(res);
          res.data.list.forEach((s) => {
            if (s.fileLabel) {
              s.fileLabel = s.fileLabel.split(";");
            }
          });
          this.tableData = res.data.list;
          this.totalSize = res.data.total;

          console.log(this.tableData);
          this.loading = false;
          this.selectId = {};
        })
        .catch(() => {
          this.loading = false;
          this.selectId = {};
        });
    },

    getTagList() {
      let obj = {
        parentId: 0,
        pageNum: this.pageNums,
        pageSize: this.pageSizes,
        name: "",
        ranges:'1'
      };
      this.$api
        .selectList(obj)
        .then((res) => {
          this.rankThree = res.data.list;
          this.rankThree.forEach((res) => {
            res.hasChildren = true;
          });
          this.totals = res.data.total;
          this.key = Math.random();
        })
        .catch(() => {});
      // this.$api
      //   .TgetLabel({
      //     firstSort: this.firstSort,
      //     secondSort: this.secondSort,
      //   })
      //   .then((res) => {
      //     this.rankOne = res.data.firstSort;
      //     this.rankTwo = res.data.secondSort;
      //     this.rankThree = res.data.label;
      //     console.log(this.choseValue1, this.choseValue2);
      //   });
    },
    choseRank(type, id) {
      if (type == "1") {
        this.choseValue1 = id;
        this.firstSort = id;
        this.getTagList();
      }
      if (type == "2") {
        this.choseValue2 = id;
        this.secondSort = id;
        this.getTagList();
      }
    },
    handleClose(text) {
      this.checkTag = [];
      this.checkList = [];
    },
    handleClick(row) {
      this.selectId = row;
      // console.log(row);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList();
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
      // console.log(`当前页: ${val}`);
    },
    handleSizeChanges(val) {
      this.pageSizes = val;
      this.getTagList();
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChanges(val) {
      this.pageNums = val;
      this.getTagList();
      // console.log(`当前页: ${val}`);
    },
    closeImg(flag) {
      this.showViewer = flag;
    },
    //下载
    download(row) {
      window.open(
        window.CONFIG.url + `/collect/projectReorganize/download/${row.id}`
      );
    },
    checkView(row) {
      this.$api
        .getUrl({ id: row.id })
        .then((res) => {
          if (res.data) {
            let type = row.fileType;
            if (type == 1) {
              this.imgList = [CONFIG.url + "/" + res.data];
              this.showViewer = true;
            } else if (type == 3) {
              this.$refs.Pdf.previewFn(CONFIG.url + "/" + res.data);
            } else if (type == 2) {
              this.video.url = CONFIG.url + "/" + res.data;
              this.$nextTick(() => {
                this.playVideo = true;
              });
            } else {
              this.showPlayer = false;
              let ipUrl = CONFIG.url + "/" + res.data;
              this.$nextTick(() => {
                this.videoPlay.src = ipUrl;
                this.videoPlay.title = "音频";
                this.videoPlay.artist = " ";
                this.showPlayer = true;
              });
            }
          } else {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error",
            });
          }
        })
        .catch((res) => {
          this.$message({
            showClose: true,
            message: res.msg,
            type: "error",
          });
        });
    },
    closeMp4() {
      this.$nextTick(() => {
        this.video.url = "obj";
        this.playVideo = false;
      });
    },
    musicClose(flag) {
      let ipUrl = "obj";
      this.$nextTick(() => {
        this.videoPlay.src = ipUrl;
        this.videoPlay.title = "";
        this.videoPlay.artist = "";
        this.showPlayer = flag;
      });
    },
  },
};
</script>
<style>
.el-tag .el-tag__close {
  color: #132232;
}
</style>
<style scoped lang="scss">
@import "@/css/mixin.scss";
@import "@/css/flex.scss";
.fileIntegration {
  padding: 0 30px;
  overflow: hidden;
  .btn-continer {
    margin-top: 30px;
    margin-bottom: 20px;
    .btn-right {
      float: right;
    }
    .xz {
      transform: rotate(-45deg);
    }
    .el-inputClass {
      float: right;
      width: 317px;
      margin-right: 10px;
    }
  }
  .Pagination {
    text-align: right;
    margin-top: 40px;
  }
  .content {
    height: 520px;
  }
  .markup {
    // width:95%;
    padding: 38px;
    border-top: 1px solid #d8d8d8;
    border-bottom: 1px solid #d8d8d8;
    p {
      @include sc(19px, #3386fe);
    }
    .tag {
      margin: 20px 0 50px 0;
    }
    .el-tag {
      margin-right: 20px;
      font-size: 18px;
      line-height: 25px;
      img {
        @include wh(20px, 20px);
        vertical-align: middle;
        display: inline-block;
      }
      span {
        vertical-align: middle;
        display: inline-block;
        margin-left: 5px;
      }
    }
    .color0 {
      color: #2285e2;
      background-color: #eff5ff;
      border-color: #eff5ff;
    }
    .color1 {
      color: #00d815;
      background-color: #ebfcec;
      border-color: #ebfcec;
    }
    .color2 {
      color: #ff8f2c;
      background-color: #fff6ee;
      border-color: #fff6ee;
    }
    .color3 {
      color: #2285e2;
      background-color: #eff5ff;
      border-color: #eff5ff;
    }
    .color4 {
      color: #fc4242;
      background-color: #fff0f0;
      border-color: #fff0f0;
    }
    .color5 {
      color: #fc4242;
      background-color: #fff0f0;
      border-color: #fff0f0;
    }
    .color6 {
      color: #fc4242;
      background-color: #fff0f0;
      border-color: #fff0f0;
    }
    .color7 {
      color: #fc4242;
      background-color: #fff0f0;
      border-color: #fff0f0;
    }
    .classify {
      margin-top: 30px;
      align-items: baseline;
      .label {
        @include sc(18px, #515c68);
        font-weight: bold;
        margin-right: 7px;
      }

      .tab-list {
        width: calc(100% - 100px);
        cursor: pointer;
        span {
          padding: 10px 20px;
          background: #f0f0f6;
          border-radius: 5px;
          margin: 0 10px 15px 0;
        }
        .chosed {
          color: #3386fe;
          background-color: #eff5ff;
        }
      }
      .tab-detail {
        width: calc(100% - 100px);
        min-height: 130px;
        background-color: #f3f3f7;
        padding: 18px 22px;
        border-radius: 5px;
        overflow-y: scroll;
        /deep/.el-checkbox__inner {
          border-radius: 50%;
          background-color: #a8a8a8;
        }
        /deep/.el-checkbox__input.is-checked + .el-checkbox__label {
          // color:#6c7c92;
        }
        /deep/.el-checkbox__input.is-checked .el-checkbox__inner {
          // background-color: #6c7c92;
          // border-color:#6c7c92;
          background-color: #409eff;
        }
      }
    }
    .classify2 {
      margin-top: 10px;
      .tab-list {
        span {
        }
      }
    }
    .classify3 {
      align-items: flex-start;
    }
  }
  .eltag {
    margin-right: 10px;
    margin-bottom: 10px;
  }
}
</style>

<style >
._progress ._time-current,
._progress ._time-amount {
  width: 80px;
}
</style>